<!-- 发送验证码组件 -->
<template>
	<view class="send-smscode-component" :class="{'disabled': countingdowm}">
		<text @tap="onTapBtn">{{ btnText }}</text>
	</view>
</template>

<script>
	export default {
    props: {
      // 倒计时秒数
      seconds: {
        type: [String, Number],
        default: 60
      }
    },
    
		data() {
			return {
        // 按钮显示的文字
				btnText: '发送验证码',
        
        // 正在倒计时？
        countingdowm: false,
        
        // 倒计时定时器
        timer: null
			};
		},
    
    /**
     * 函数
     */ 
    methods: {
      /**
       * 点击了按钮
       */ 
      onTapBtn() {
        // 正在倒计时？
        if(this.countingdowm) {
          uni.showToast({
            title: '请稍候再试',
            icon: 'none'
          });
          return;
        }
        
        // 倒计时
        this.countdown();
        
        // 发送验证码
        this.sendCode();
      },
      
      /**
       * 倒计时
       */ 
      countdown() {
        // 倒计时总秒数
        let seconds = this.seconds;
        
        // 更新倒计时状态
        this.countingdowm = true;
        
        // 更新显示文本
        this.btnText = `${seconds}s后重新发送`;
        
        // 设置定时器
        let _this = this;
        this.timer = setInterval(() => {
          // 秒数-1
          seconds--;
          
          // 倒计时完成？
          if(seconds > 0) {
            // 更新显示文本
            _this.btnText = `${seconds}s后重新发送`;
          } else {
            // 更新显示文本
            _this.btnText = '发送验证码';
            
            // 更新倒计时状态
            _this.countingdowm = false;
            
            // 清除定时器
            clearInterval(_this.timer);
          }
        }, 1000);
      },
      
      /**
       * 发送验证码
       */
      sendCode() {
        let _this = this;
        let timer = setTimeout(() => {
          // 发送验证码失败
          // 弹出失败提示
          uni.showToast({
            title: '发送失败',
            icon: 'none'
          });
          
          // 清除定时器
          clearInterval(_this.timer);
          
          // 更新按钮显示文本
          _this.btnText = '发送验证码';
          
          // 更新倒计时状态
          _this.countingdowm = false;
        }, 6000);
      }
    }
	}
</script>

<style scoped lang="scss">
.send-smscode-component {
  font-size: 26upx;
  padding-left: 20upx;
  display: inline-block;
  color: #0098FF;
}

.disabled {
  opacity: 0.8;
}
</style>
